<template>
  <div class="detail-container">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>分销代付订单详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="$router.go(-1)">返回</el-button>
      </div>
      
      <div v-loading="loading" class="detail-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单ID">{{ orderDetail.id }}</el-descriptions-item>
          <el-descriptions-item label="旅游产品ID">{{ orderDetail.travel_id }}</el-descriptions-item>
          <el-descriptions-item label="SKU ID">{{ orderDetail.travel_sku_id || '-' }}</el-descriptions-item>
          <el-descriptions-item label="SKU库存ID">{{ orderDetail.travel_sku_stock_id || '-' }}</el-descriptions-item>
          <el-descriptions-item label="用户ID">{{ orderDetail.user_id || '-' }}</el-descriptions-item>
          <el-descriptions-item label="分销员ID">{{ orderDetail.distributor_id || '-' }}</el-descriptions-item>
          <el-descriptions-item label="预付金额">
            <span style="color: #E6A23C; font-weight: bold; font-size: 16px;">¥{{ orderDetail.prepay_amount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="分销佣金">
            <span style="color: #67C23A; font-weight: bold; font-size: 16px;">¥{{ orderDetail.share_amount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag v-if="orderDetail.status === 'pending'" type="warning" size="medium">待支付</el-tag>
            <el-tag v-if="orderDetail.status === 'paid'" type="success" size="medium">已支付</el-tag>
            <el-tag v-if="orderDetail.status === 'refunding'" type="danger" size="medium">退款中</el-tag>
            <el-tag v-if="orderDetail.status === 'confirmed'" type="primary" size="medium">已确认</el-tag>
            <el-tag v-if="orderDetail.status === 'refunded'" type="info" size="medium">已退款</el-tag>
            <el-tag v-if="orderDetail.status === 'completed'" type="success" size="medium">已完成</el-tag>
            <el-tag v-if="orderDetail.status === 'cancelled'" type="danger" size="medium">已取消</el-tag>
            <el-tag v-if="orderDetail.status === 'pending_verification'" type="warning" size="medium">待确认</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建者">{{ orderDetail.creator || '-' }}</el-descriptions-item>
          <el-descriptions-item label="更新者">{{ orderDetail.updater || '-' }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ orderDetail.create_time | parseTime }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ orderDetail.update_time | parseTime }}</el-descriptions-item>
        </el-descriptions>
        
        <!-- 分销二维码 -->
        <div class="section" v-if="orderDetail.qrcode">
          <h3>分销二维码</h3>
          <div class="image-container">
            <el-image
                :preview-src-list="[orderDetail.qrcode]"
                style="width: 200px; height: 200px"
                :src="orderDetail.qrcode"
                fit="contain">
            </el-image>
          </div>
        </div>
        
        <!-- 分销海报 -->
        <div class="section" v-if="orderDetail.share_image_url">
          <h3>分销海报</h3>
          <div class="image-container">
            <el-image
                :preview-src-list="[orderDetail.share_image_url]"
                style="width: 300px; height: 400px"
                :src="orderDetail.share_image_url"
                fit="contain">
            </el-image>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button type="primary" @click="onEdit">编辑订单</el-button>
          <el-button type="success" @click="onConfirm" v-if="orderDetail.status === 'paid'">确认行程</el-button>
          <el-button type="warning" @click="onRefund" v-if="orderDetail.status === 'paid'">申请退款</el-button>
          <el-button type="danger" @click="onCancel" v-if="orderDetail.status === 'pending'">取消订单</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { http } from "@/api";

export default {
  name: "TravelShareOrderDetail",
  data() {
    return {
      loading: false,
      orderId: null,
      orderDetail: {}
    };
  },
  created() {
    this.orderId = this.$route.query.id;
    if (this.orderId) {
      this.getOrderDetail();
    }
  },
  methods: {
    // 获取订单详情
    async getOrderDetail() {
      this.loading = true;
      try {
        const response = await http.travelShareOrder.detail(this.orderId);
        this.orderDetail = response.data || {};
      } catch (error) {
        console.error("获取订单详情失败:", error);
        this.$message.error("获取订单详情失败");
      } finally {
        this.loading = false;
      }
    },
    
    // 编辑订单
    onEdit() {
      this.$router.push({
        path: '/travelShareOrder/edit',
        query: { id: this.orderId }
      });
    },
    
    // 确认行程
    onConfirm() {
      this.$confirm('确认要确认此行程吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await http.travelShareOrder.update(this.orderId, { status: 'confirmed' });
          this.$message.success('行程确认成功');
          this.getOrderDetail();
        } catch (error) {
          console.error('确认行程失败:', error);
          this.$message.error('确认行程失败');
        }
      });
    },
    
    // 申请退款
    onRefund() {
      this.$confirm('确认要申请退款吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await http.travelShareOrder.update(this.orderId, { status: 'refunding' });
          this.$message.success('退款申请成功');
          this.getOrderDetail();
        } catch (error) {
          console.error('申请退款失败:', error);
          this.$message.error('申请退款失败');
        }
      });
    },
    
    // 取消订单
    onCancel() {
      this.$confirm('确认要取消此订单吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await http.travelShareOrder.update(this.orderId, { status: 'cancelled' });
          this.$message.success('订单取消成功');
          this.getOrderDetail();
        } catch (error) {
          console.error('取消订单失败:', error);
          this.$message.error('取消订单失败');
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.detail-container {
  padding: 20px;
}

.detail-content {
  padding: 20px 0;
}

.section {
  margin-top: 30px;
  
  h3 {
    margin-bottom: 15px;
    color: #303133;
    font-size: 16px;
    font-weight: 600;
  }
}

.image-container {
  text-align: center;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
}

.action-buttons {
  margin-top: 30px;
  text-align: center;
  
  .el-button {
    margin: 0 10px;
  }
}
</style>
